<script setup lang="ts">
import { ref } from 'vue'
import { $UpdatePassword } from '@/api/user';

var user = ref({
    id: sessionStorage.getItem('id'),
    userpassword: '',
    newuserpassword: '',
    newPassword: ''
})

//修改密码
function changePassword() {
    $UpdatePassword(user.value)
}
</script>

<template>
    <div class="change-password">
        <div class="password-top">
            <span>修改密码</span>
        </div>
        <div class="password-bottom">
            <div class="password-bottom-body">
                <li>
                    <label for="account">账号&nbsp;:</label>
                    <input type="text" id="account" disabled v-model="user.id" />
                </li>
                <li>
                    <label for="old_password">旧密码&nbsp;:</label>
                    <input type="password" id="old_password" placeholder="请输入旧密码" v-model="user.userpassword" />
                </li>
                <li>
                    <label for="new_password">新密码&nbsp;:</label>
                    <input type="password" id="new_password" placeholder="请输入新密码" v-model="user.newuserpassword" />
                </li>
                <li>
                    <label for="again_password">确认密码&nbsp;:</label>
                    <input type="password" id="again_password" placeholder="请输入确认密码" v-model="user.newPassword" />
                </li>
                <button class="password-bottom-body-btn" @click="changePassword">修改密码</button>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.change-password {
    flex: 3;
    display: flex;
    flex-direction: column;
    height: 110vh;
    color: #333;

    .password-top {
        flex: 1;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 0.5vw;
        padding-left: 3vw;
        margin-bottom: 2vh;
        border: 0.1vw solid #ccccccba;

        span {
            font-size: 1.2vw;
            font-weight: 800;
            line-height: 3vh;
            padding-left: 2vw;
            border-left: 0.5vw solid #45c998;
        }
    }

    .password-bottom {
        flex: 12;
        display: flex;
        justify-content: center;
        border-radius: 0.5vw;
        background-color: #fff;
        border: 0.1vw solid #ccccccba;

        .password-bottom-body {
            margin: 4vh 0;

            li {
                display: flex;
                align-items: center;
                font-size: 1.2vw;
                margin: 5vh 0;

                label {
                    width: 7vw;
                    cursor: pointer;
                }

                input {
                    width: 20vw;
                    height: 7vh;
                    font-size: 1.1vw;
                    padding-left: 1vw;
                    border: 0.1vw solid #ccccccba;
                }
            }

            .password-bottom-body-btn {
                width: 27vw;
                height: 8vh;
                background-color: #45c998;
                border: none;
                color: #fff;
                font-size: 1.2vw;
                border-radius: 0.5vw;
                cursor: pointer;
            }
        }
    }
}
</style>